<template>
  <el-dialog title="一期一档" :close-on-click-modal="false" :visible.sync="visible">
    <!-- <el-form :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px">
      <div style="font-size: 18px">一、培训计划</div>
      <el-form-item label="培训目的" prop="title">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="培训目的" prop="title">
        <span></span>
      </el-form-item>
      <el-form-item label="培训目的" prop="title">
        <el-input></el-input>
      </el-form-item>

    </el-form> -->
    <div class="mod-config">
      <div style="margin-bottom: 20px">
        <span style="font-size: 18px">一、培训计划</span>
        <br />
        <span>1.培训目的：加强从业人员“一通三防”知识</span>
        <br />
        <span>2.培训时间：2019年1月1日~2019年1月3日</span>
        <br />
        <span>3.培训地点：调度楼三楼会议室</span>
        <br />
        <span>4.培训安排：</span>
        <br />
        <span>4.课程讲义：</span>
      </div>
      <el-table  :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
        <el-table-column label="“一通三防”安全培训档案" header-align="center">
          <el-table-column align="center" type="index" header-align="center" width="80" label="ID"></el-table-column>
          <el-table-column prop="title" header-align="center" align="center" label="标题"></el-table-column>
          <el-table-column prop="trainContent" header-align="center" align="center" label="简介"></el-table-column>
          <el-table-column prop="trainTeacher" header-align="center" align="center" label="培训老师"></el-table-column>
          <el-table-column prop="trainHours" header-align="center" align="center" label="培训课时"></el-table-column>
          <el-table-column prop="trainPlace" header-align="center" align="center" label="培训地址"></el-table-column>
          <el-table-column
            prop="trainStartTime"
            header-align="center"
            align="center"
            label="培训开始时间"
          ></el-table-column>
          <el-table-column prop="trainEndTime" header-align="center" align="center" label="培训结束时间"></el-table-column>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="margin-top: 20px">
        <el-button type="primary" @click="visible = false">取消</el-button>
        <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      dataForm: {
        key: '',
        trainId: '',
        title: ''
      },
      dateList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataList: [],
      dataListLoading: false,
      dataListSelections: [],
      visible: false,
      ApplicationSituationVisible: false
    }
  },
  methods: {
    // 获取数据列表
    init (id) {
      this.dataForm.trainId = id
      this.visible = true
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(`/statistics/trainInfo`),
        method: 'post',
        data: {
          trainId: this.dataForm.trainId
        }
      }).then(res => {
        if (res && res.code === 200) {
          this.dataList = res.data
        } else {
          this.dataList = []
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
      this.getDateList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
      this.getDateList()
    },

    dataFormSubmit () {},
    handleDownload () {
      import('@/vendor/Export2Excel').then(excel => {
        const tTitle = ['“一通三防”安全培训档案']
        const tHeader = [
          '培训名称',
          '内容简介',
          '培训老师',
          '培训课时',
          '培训地址',
          '培训开始时间',
          '培训结束时间'
        ]
        const filterVal = [
          'title',
          'trainContent',
          'trainTeacher',
          'trainHours',
          'trainPlace',
          'trainStartTime',
          'trainEndTime'
        ]
        const data = this.formatJson(filterVal, this.dataList)
        const merges = ['A1:I1']
        excel.export_json_to_excel({
          title: tTitle,
          header: tHeader,
          data,
          merges,
          filename: '一期一档 ' + new Date().toLocaleDateString()
        })
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j]
        })
      )
    }
  }
}
</script>

<style scoped>
</style>
